Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
You are here: HomeLatest ProductsOpenCartBe the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

As we known that website layout defines a website's structure including the content, the way it looks, and the way it works. By understanding the website layout you will have an overall look on your website as well as easily manage, customize it. In this tutorial, we will discuss about layout in OpenCart by exploring the Core Layouts in it and creating a new layout then associating it to products, categories and modules.

Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

In OpenCart, layout is very useful to assign different modules to the page. Besides, OpenCart also allows to create new layouts and override the default layouts assigned to the different pages.

Must Remember OpenCart Layout Sections

There are some important sections that you must remember in managing OpenCart Layouts: route assignment and module assignment. Lets take the home layout for example.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

Route Assignment

For example, set the Route Assignment value to "common/home". Whenever there's a URL containing "common/home" in the front­-end page, it'll activate all the modules assigned to this layout during the home page request in the front­-end.

Module Assignment

This section contains all the modules which are already configured to be displayed on the home page.

Create a New Layout in OpenCart 3.x & 2.x

1. Navigate to System > Layouts in OpenCart admin panel. Click the Add New (+) button.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

2. Fill the required information.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

3. Click Save button

Assign Module to the page’s Layout

1. Click on the Add module button.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

2. Select the module you would like to assign and choose its position.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

3. Click Save at the top right:

Associate Layouts With Products, Categories

1. Go to Catalog > Products, select to edit the product you want, "Balltip nullaelit" for example.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

2. Go to the Design tab, find Layout Override option. Select the layout you want in the drop­-down box . Then Save the product.

Lets Be the Master of OpenCart Layout | OpenCart 3.x & 2.x Tutorial

Briefly, by understanding the layout structure in OpenCart, how it works, you can totally manage your website as well as easily customize the website template as your wishes. If you have any comments, feel free to share it with us.

Love all our templates?

Join our membership clubs starting at $49 only for access to all of our templates

Join Now
Home Pricing
Your Cart is currently empty!
Product update
Coupon
add
Coupon code invalid! Please re-enter!
AJAX loader
SearchSupport
Magento Themes Magento Extensions Free Magento Extensions Prestashop Themes Prestashop Modules Magento 2 Themes